<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Information</title>

		<link rel="stylesheet" type="text/css" href="style/css.css">
		<link rel="stylesheet" type="text/css" href="style/detail.css">
		<link rel="stylesheet" type="text/css" href="style/product_detail.css">
		
		
		<script src="js/js.js"></script>
	</head>

	<body>
		<div class="top">
			<div class="top-1">
				<ul>
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">帮助</a>
					</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<img src="images/logo.jpg" />
			<div class="top-2">
				<ul>
					<li>关于我们</li>
					<li>产品展示</li>
					<li>新闻中心</li>
					<li>人才招聘</li>
					<li>客户留言</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<div class="top-3">
				<ul>
					<li>CEO致词</li>
					<li>公司历史</li>
					<li>企业文化</li>
					<li>组织结构</li>
					<li>合作伙伴</li>
				</ul>
			</div>
		</div>

		<div style="clear: both;"></div>
		<!--清除浮动-->

		<div class="guanggao">
			<img src="images/Information_ganggao.jpg" />
		</div>

		<div class="zhong">
			<div class="vip">
				<a> PRODUCT</a>
				<p>产品展示</p>
				<hr width="165px" size="5" style="margin: 0 auto; margin-top: 5px;background-color: #ccc;border: none;" />
				<ul>
					<li><img src="images/Information_xinxi.jpg" />
						<a style="color: #214C8F;">手机设备</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>电脑设备</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>摄像设备</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>监控设备</a>
					</li>
				</ul>
			</div>

			<div class="zilian">
				<div class="z-top">
					<ul class="left">
						<li>&nbsp;产品展示</li>
					</ul>
					<ul class="r">
						<li>主页&nbsp;></li>
						<li>产品展示 &nbsp; </li>

					</ul>
				</div>
								<div class="chanpin">
											
											<ul  style="width: 402px;height: 208px; float: left;    margin-right: 30px;">
												<li><img src="images/Product_detail_chanpin.jpg"  id="bbb"/></li>
											</ul>
												<div id="control_tag">
		</div>
											<div class="cpyou">
													<a >产品  </a><samp>ASA SG 1209</samp>
											</div>
											<div class="cpyou">
													<a >大小  </a><samp>103.8(L) x 50.8(W) x 12.0(H) </samp>
											</div>
											<div class="cpyou">
													<a style="margin-right: 18px;">出厂日期  </a><samp >ASA SG 1209</samp>
											</div>
											<div class="cpyou">
													<a >配件  </a><samp>2014-01-01</samp>
											</div>
											<div class="cpyou">
													<a style="margin-right: 18px; " >出厂日期  </a><samp style="float: right;margin-right: 15px;" >标准电池，背带（清洁）<br/>， 
专用的电池充电底座，<br />
立体声耳机麦克风，外接天线，	</samp>
											</div>
											<ul id="oot">
												<li><img src="images/Product_detail_xi1.jpg" onclick="changeImg();" /> </li>
												<li><img src="images/Product_detail_xi2.jpg"  onclick="changeImg2();" /></li>
												<li><img src="images/Product_detail_xi3.jpg" onclick="changeImg3();"  /></li>
												
											</ul>
								</div>
								<!--
                                	作者：1352371565@qq.com
                                	时间：2017-08-21
                                	描述：
                                -->
								<script>
												function changeImg() {
												    var obj = document.getElementById("bbb");   
												        obj.setAttribute("src", "images/Product_detail_xi1.jpg");     
												}
												function changeImg2() {
												    var obj = document.getElementById("bbb");   
												        obj.setAttribute("src", "images/Product_detail_xi2.jpg");     
												}
												function changeImg3() {
												    var obj = document.getElementById("bbb");   
												        obj.setAttribute("src", "images/Product_detail_xi3.jpg");     
												}
								</script>
								
								
								
								<div class="gundong">
												<ul>
													
													<li style="margin-left: 50px;"><img src="images/Product_detail_zxi1.jpg" /><p>ASA SG1209 </p></li>
													<li><img src="images/Product_detail_zxi2.jpg" /><p>ASA SG1209 </p></li>
													<li><img src="images/Product_detail_zxi3.jpg" /><p>ASA SG1209 </p></li>
													<li style="margin-right: 80px;"><img src="images/Product_detail_zxi4.jpg" /><p>ASA SG1209 </p></li>
													
													
													<li style="margin-left: 50px;"><img src="images/Product_detail_zxi1.jpg" /><p>ASA SG1209 </p></li>
													<li><img src="images/Product_detail_zxi2.jpg" /><p>ASA SG1209 </p></li>
													<li><img src="images/Product_detail_zxi3.jpg" /><p>ASA SG1209 </p></li>
													<li style="margin-right: 80px;"><img src="images/Product_detail_zxi4.jpg" /><p>ASA SG1209 </p></li>
													
												</ul>
												<img class="scrop1" style="margin-right: 25px;margin-left: 10px;margin-top: 35px;" src="images/Product_detail_anzuo.jpg" />
												<img class="scrop2" style="margin-right: 10px;margin-top: 35px;"  src="images/Product_detail_anyou.jpg" />
								</div>
								
								<script>
		var c = $(".scrop2")
		c.click(function(){
			var index = $(this).index()-1;
			$(this).siblings("ul").stop().animate({
				"left":"-"+index*678+"px"
			},300)
		})
		var C = $(".scrop1")
		C.click(function(){
			var index = $(this).index()-1;
			$(this).siblings("ul").stop().animate({
				"left":index*678+"px"
			},300)

		})
	</script>
								
				<!--
                	作者：1352371565@qq.com
                	时间：2017-08-20
                	描述：选项卡
                -->
					<div class="zuida">
			<div class="zuo">
				<div class="tab">
					<div class="tab_menu">
						<ul>
							<li class="selected">产品特征</li>
							<li>产品规格</li>
							<a href="#" style="float: right;color: #666666;"> >> more </a>
						</ul>

					</div>
					<div class="tab_box">
						<div>
 	
							<ul style="float: left;position: relative;list-style-type:square;color:#666;list-style: none;width: 681px;">
								<li style="border-bottom: 1px dashed  #dbdbdb;height: 123px;">
									<img src="images/Product_detail_xia.jpg" style="float: left;"/>
									<a href="#" style="color:#666;font-size:18px;color: #2665a8;float: left;margin-top: 38px;">01. MP3 Player</a>
									<p style="font-size: 12px;color: #666;float: left;margin-top: 13px;">输入产品的简要说明在产品上，输入产品简要的简要说明 包含产品的介绍去的简要说明。</p>
								</li>
								<li style="border-bottom: 1px dashed  #dbdbdb;height: 123px;">
									<img src="images/Product_detail_xia.jpg" style="float: left;"/>
									<a href="#" style="color:#666;font-size:18px;color: #2665a8;float: left;margin-top: 38px;">02. 强大的内置扬声器</a>
									<p style="font-size: 12px;color: #666;float: left;margin-top: 13px;">输入产品的简要说明在产品上，输入产品简要的简要说明 包含产品的介绍去的简要说明。</p>
								</li>
								<li style="border-bottom: 1px dashed  #dbdbdb;height: 123px;">
									<img src="images/Product_detail_xia.jpg" style="float: left;"/>
									<a href="#" style="color:#666;font-size:18px;color: #2665a8;float: left;margin-top: 38px;">03. 高速响应无残影率</a>
									<p style="font-size: 12px;color: #666;float: left;margin-top: 13px;">输入产品的简要说明在产品上，输入产品简要的简要说明 包含产品的介绍去的简要说明。</p>
								</li>
							</ul>
							
						</div>

						<div class="hide">
							<div>
								<ul style="float: left;position: relative;list-style-type:square;color:#666;list-style: none;width: 681px;">
								<li style="border-bottom: 1px dashed  #dbdbdb;height: 123px;">
									<img src="images/Product_detail_xia.jpg" style="float: left;"/>
									<a href="#" style="color:#666;font-size:18px;color: #2665a8;float: left;margin-top: 38px;">011. MP3 Player</a>
									<p style="font-size: 12px;color: #666;float: left;margin-top: 13px;">输入产品的简要说明在产品上，输入产品简要的简要说明 包含产品的介绍去的简要说明。</p>
								</li>
								<li style="border-bottom: 1px dashed  #dbdbdb;height: 123px;">
									<img src="images/Product_detail_xia.jpg" style="float: left;"/>
									<a href="#" style="color:#666;font-size:18px;color: #2665a8;float: left;margin-top: 38px;">022. 强大的内置扬声器</a>
									<p style="font-size: 12px;color: #666;float: left;margin-top: 13px;">输入产品的简要说明在产品上，输入产品简要的简要说明 包含产品的介绍去的简要说明。</p>
								</li>
								<li style="border-bottom: 1px dashed  #dbdbdb;height: 123px;">
									<img src="images/Product_detail_xia.jpg" style="float: left;"/>
									<a href="#" style="color:#666;font-size:18px;color: #2665a8;float: left;margin-top: 38px;">033. 高速响应无残影率</a>
									<p style="font-size: 12px;color: #666;float: left;margin-top: 13px;">输入产品的简要说明在产品上，输入产品简要的简要说明 包含产品的介绍去的简要说明。</p>
								</li>
							</ul>
							
								
							</div>
						</div>
					</div>
				</div>
				</div>
				</div>
				</div>
				<!--
    	作者：1352371565@qq.com
    	时间：2017-08-19
    	描述：选择列表js
    -->
		<script type="text/javascript">
			$(function() {
				var $div_li = $(".tab_menu ul li"); //找出样式tab_menu 中的 ul li
				$div_li.click(function() { //找出样式tab_menu 中的 ul li 点击运行
					$(this).addClass("selected")
						.siblings().removeClass("selected");
					var index = $div_li.index(this);
					$("div.tab_box > div")
						.eq(index).show()
						.siblings().hide();
				}).hover(function() {
					$(this).addClass("hover");
				}, function() {
					$(this).removeClass("hover");
				})
			})
		</script>

				
				
			<div style="clear: both;"></div>
			<!--清除浮动-->

			<div class="wei">
				<p>地址：广东省广州市海珠区新港西路231号3栋4层 联系人：乐 乐 移动电话：13588888888 固定电话：020-1234567 传 真：020-1234567 Copyright @ 2014 文豆网络科技有限公司 版权所有 粤ICP备0000000号</p>
				<select style="float: right;">
					<option>友情链接</option>
					<option>1</option>
					<option>2</option>

				</select>
			</div>

		</div>

	</body>

</html>